<template>
	<div class="movie_body" ref="movie_body">
		<Loading v-if="isLoading" />
		<Scroller v-else :handleScroll='handleScroll' :handleTouchEnd='handleTouchEnd'>
			<ul>
				<li>{{pullDownMessage}}</li>
				<li v-for="(item) in commingList" :key="item.id">
					<div @click="handleToDetail(item.id)" class="pic_show"><img :src="item.img | setWH('128.180')"></div>
					<div class="info_list">
						<h2 @click="handleToDetail(item.id)">{{item.nm}} <img v-if="item.version=='v3d imax'" src="@/assets/maxs.png" alt=""> </h2>
						<p><span class="person">{{item.wish}}</span> 人想看</p>
						<p>主演: {{item.star}}</p>
						<p>{{item.showInfo}}</p>
					</div>
					<div class="btn_pre">
						预售
					</div>
				</li>
			</ul>
		</Scroller>
	</div>
</template>

<script>
	import BetterScroll from 'better-scroll'
	import {
		setWH
	} from '../../filter'
	export default {
		data() {
			return {
				commingList: [], //即将上映列表
				isLoading: true, //加载动画
				pullDownMessage: "", //加载文本
				preCityId: -1 //默认cityId的值
			}
		},

		//当有keep-alive系统缓存的时候 需要发送ajax请求时 用到activated
		activated() {

			let cityId = this.$store.state.city.id

			if (this.preCityId === cityId) {
				return;
			}
			
			this.axios.get(
				"/comingList?ci="+cityId+"&limit=10&offset=0&token=&optimus_uuid=D0EFD4B06A5E11EA8BBA2365D76113A94B187AC3014B4E76B1AD7594F7F46599&optimus_risk_level=71&optimus_code=10"
			).then(res => {
				this.commingList = res.data.coming
				this.isLoading = false
				this.preCityId = cityId
				// this.$nextTick(() => {
				// 	let bs = new BetterScroll(this.$refs.movie_body, {
				// 		click: true
				// 	})
				// })
			})
		},
		methods: {
			handleScroll(pos) {//下拉更新方法
				if (pos.y > 30) {
					this.pullDownMessage = "正在更新中"
				}
			},
			handleTouchEnd(pos) {//下拉结束后的方法
				if (pos.y > 30) {
					this.axios.get('/movieOnInfoList?city=20').then(res => {
						this.pullDownMessage = "更新成功"
						setTimeout(() => {
							this.moveList = res.data.movieList
							this.pullDownMessage = ""
						}, 1000)
					})
				}
			},
			//跳转到详情页
			handleToDetail(movieId){
				//编程式路由 命名路由
				this.$router.push('/movies/detail/2/'+movieId)
			}
		}
	}
</script>

<style scoped>
	#content .movie_body {
		flex: 1;
		overflow-y: hidden;
	}

	.movie_body ul {
		margin: 0 12px;
		overflow: hidden;
	}

	.movie_body ul li {
		margin-top: 12px;
		display: flex;
		align-items: center;
		border-bottom: 1px #e6e6e6 solid;
		padding-bottom: 10px;
	}

	.movie_body .pic_show {
		width: 64px;
		height: 90px;
	}

	.movie_body .pic_show img {
		width: 100%;
	}

	.movie_body .info_list {
		margin-left: 10px;
		flex: 1;
		position: relative;
	}

	.movie_body .info_list h2 {
		font-size: 17px;
		line-height: 24px;
		width: 150px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.movie_body .info_list p {
		font-size: 13px;
		color: #666;
		line-height: 22px;
		width: 200px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.movie_body .info_list .grade {
		font-weight: 700;
		color: #faaf00;
		font-size: 15px;
	}

	.movie_body .info_list img {
		width: 50px;
		position: absolute;
		right: 10px;
		top: 5px;
	}

	.movie_body .btn_mall,
	.movie_body .btn_pre {
		width: 47px;
		height: 27px;
		line-height: 28px;
		text-align: center;
		background-color: #f03d37;
		color: #fff;
		border-radius: 4px;
		font-size: 12px;
		cursor: pointer;
	}

	.movie_body .btn_pre {
		background-color: #3c9fe6;
	}
</style>
